From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Mon, 15 Dec 2025 23:48:10 +0800
Subject: initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.
---
 src/app/og/[...slug]/og.tsx | 65 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/app/og/[...slug]/og.tsx

(limited to 'src/app/og/[...slug]/og.tsx')

diff --git a/src/app/og/[...slug]/og.tsx b/src/app/og/[...slug]/og.tsx
new file mode 100644
index 0000000..5754e96
--- /dev/null
+++ b/src/app/og/[...slug]/og.tsx
@@ -0,0 +1,65 @@
+import type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
+import { ImageResponse } from 'next/og';
+import type { ReactElement } from 'react';
+
+interface GenerateProps {
+  title: string;
+  description?: string;
+}
+
+export function generateOGImage(
+  options: GenerateProps & ImageResponseOptions,
+): ImageResponse {
+  const { title, description, ...rest } = options;
+
+  return new ImageResponse(
+    generate({
+      title,
+      description,
+    }),
+    {
+      width: 1200,
+      height: 630,
+      ...rest,
+    },
+  );
+}
+
+export function generate({
+  title,
+  description = 'Learn more about this post by visiting the website.',
+}: GenerateProps): ReactElement {
+  return (
+    <div
+      tw='flex h-full w-full bg-black text-white'
+      style={{ fontFamily: 'Geist Sans' }}
+    >
+      <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 left-16 w-[1px]' />
+      <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 right-16 w-[1px]' />
+      <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] top-16' />
+      <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] bottom-16' />
+      <div tw='flex flex-col absolute w-[896px] justify-center inset-32'>
+        <div
+          tw='tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]'
+          style={{
+            textWrap: 'balance',
+            fontWeight: 600,
+            fontSize: title && title.length > 20 ? 64 : 80,
+            letterSpacing: '-0.04em',
+          }}
+        >
+          {title}
+        </div>
+        <div
+          tw='text-[40px] leading-[1.5] flex-grow-1 text-stone-400'
+          style={{
+            fontWeight: 500,
+            textWrap: 'balance',
+          }}
+        >
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3

